<template>
    <div class="robot-dialog">
        <el-dialog center :title="title" :show-close="false" :close-on-click-modal="false"
            :close-on-press-escape="false" :visible.sync="dialogVisible" width="500px">
            <div>
                <div class="option">
                    <span class="option-title">昵称</span>
                    <el-input v-model="dialogData.name" style="width:160px"></el-input>
                </div>
                <div class="option">
                    <span class="option-title">二维码</span>
                    <div>
                        <uploadCutOwnImg v-model="dialogData.qrCode" :width="1080" :height="840"/>
                        <span class="option-hint">上传客服机器人二维码，建议上传png以及jpg格式</span>
                    </div>
                </div>
                <div class="option">
                    <span class="option-title">工作状态</span>
                    <el-select v-model="dialogData.status" placeholder="请选择工作状态" style="width:160px">
                        <el-option label="使用" :value="0"></el-option>
                        <el-option label="停用" :value="1"></el-option>
                        <el-option label="封禁" :value="2"></el-option>
                        <el-option label="满员" :value="3"></el-option>
                    </el-select>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="submit">取 消</el-button>
                <el-button type="primary" @click="submit({ params: dialogData })">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: 'upOrCreateDialog',
    props: {
        title: {
            type: String,
            default: '编辑信息'
        },
        dialogVisible: {
            type: Boolean,
            default: false
        },
        submit: {
            type: Function,
            default: null
        }
    },
    data () {
        return {
            dialogData: {
                name: '',
                qrCode: '',
                status
            }
        }
    }
}
</script>

<style lang="scss">
    .robot-dialog {
        /deep/ .el-dialog {
            border-radius: 12px;
            overflow: hidden;
            .el-dialog__title {
                color: #9B9A9A;
            }
            .el-dialog__footer {
                .dialog-footer {
                    display: flex;
                    justify-content: space-around;
                }
            }
        }
        .option {
            display: flex;
            margin-bottom: 30px;
            margin-left: 10px;
            .option-title {
                display: inline-block;
                width: 120px;
                margin-top: 5px;
                font-size: 16px;
                color: #6D6D6D;
            }
            .option-hint {
                display: inline-block;
                margin-top: 12px;
                color: #A29E9E;
            }
        }
    }
</style>
